<template>
<div class="page-container-padding" v-loading="pageDataLoading">
  <!-- 查询条件 -->
  <div>
    <span>
      <el-date-picker
      style="width:220px;"
        v-model="dateRange"
        type="daterange"
        size="mini"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false"
      >
      </el-date-picker>
    </span>
    <span style="margin-left:6px">
      <el-select v-model="queryUserId" size="mini" style="width:150px;">
        <el-option v-for="u in userList" :value="u.id" :label="u.admin_name" :key="u.id"></el-option>
      </el-select>
    </span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="dateRangeQuery">查询</el-button></span>
    <span style="margin-left:6px;"><el-button type="success" size="mini" @click="currentMonthQuery">查本月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preMonthQuery">上一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextMonthQuery">下一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="yearQuery">全年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preYearQuery">上一年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextYearQuery">下一年</el-button></span>
  </div>
    <!-- 审查方法提示 -->
    <div style="color: #ff0000">点击审查结果的文字可进行审查和修改.</div>
  <!-- 显示方案的内容 -->
  <div style="margin-top:10px;">
    <div class="msg-box" v-for="item,index in dataList" :key="item.id">
      <div><span class="title-label">方案标题：</span><span class="title-text"><a :href="fileStorage + item.filepath" target="_blank">{{ item.title }}</a></span></div>
      <div><span class="title-label">有效期：</span><span>{{ item.active_date }} 至 {{ item.expire_date }}</span></div>
      <div><span class="title-label">状态：</span><span>{{ item.state_dept }}</span></div>
        <div>
          <el-tooltip
            placement="top-start"
            effect="light"
            :content="'评级时间：' + item.level_time"
          >
            <span class="title-label">评级结果：</span>
          </el-tooltip>
          <span>{{ item.level_text }}</span>
        </div>
        <div>
          <el-tooltip
            placement="top-start"
            effect="light"
            :content="'批准时间：' + item.examine_time"
          >
            <span class="title-label">批准结果：</span>
          </el-tooltip>
          <span>{{ item.ret_text }}</span>
        </div>
      <div><span class="title-label">撰写人：</span><span>{{ item.admin_name }}</span></div>
      <div><span class="title-label">方案结果：</span><span :class="item.plan_profit>0?'red-text':'green-text'">{{ item.plan_profit }}</span></div>
      <div>
          <span class="title-label">
            <el-tooltip
              placement="top-start"
              effect="light"
              :content="'审查时间：' + item.audit_time"
            >
              <span style="font-size: 17px; color: #ff5300; font-weight: 700">
                审查：
              </span>
            </el-tooltip>
          </span>
        <span v-if="item.editabled">
          <el-select v-model="item.audit_flag" size="mini" style="width:100px;margin-right:4px;">
            <el-option :value="1" label="符合"></el-option>
            <el-option :value="0" label="不符合"></el-option>
          </el-select>
          <el-button type="primary" size="mini" @click="toSaveAudit(item)">保存</el-button>
          <el-button type="infor" size="mini" @click="item.editabled=false">取消</el-button>
        </span>
        <span v-else style="color: #fff;cursor:pointer;padding:2px 4px;background-color: #ff5300;border-radius:5px;" @click="item.editabled=true">{{ item.audit_text }}</span>
      </div>
      <br>
      <div><span style="cursor:pointer;color: #0066FF;" @click="toShowRecord(index)">模拟跟踪记录<i :class="currentShowIndex == index?'el-icon-caret-bottom':'el-icon-caret-right'"></i></span></div>
      <div v-show="currentShowIndex === index" style="border-top: 1px dashed #222;margin-top: 10px;padding-top: 10px;">
        <div v-loading="currentShowIndex==index?followTextLoading:false">
          <div style="margin: 10px 0;color:#f34700;font-size:18px;">跟踪记录：</div>
          <div style="margin-top: 10px;" v-for="ft,i in item.followList" :key="'ft'+i">
            <div><span style="color: #0066FF;margin-right: 10px;">{{ ft.active_time }}</span></div>
            <div style="line-height: 24px;text-indent: 2em;">{{ ft.description }}</div>
          </div>
          <div><el-button icon='el-icon-caret-top' type="text" @click="currentShowIndex=-1">收起记录</el-button></div>
        </div>
      </div>
    </div>
  </div>
  <el-pagination style="margin-top:5px;"
    background
    :current-page="page"
    :page-size="pageSize"
    layout="total, prev, pager, next, jumper"
    :total="totalCount"
    @current-change="currentPageChange">
  </el-pagination>

</div>
</template>

<script>
import { fileStorage } from '@/config'
import { getAnalystList } from '@/api/user'
import { getMonthDatePoint, getYearDatePoint, datetimeToStr } from '@/utils/datetimeUtils'
import { getInvestomentPlan, auditInvestPlan, getInvestmentFollow } from '@/api/departmentWork/investment'
export default {
  data(){
    return {
      fileStorage: fileStorage,
      pageDataLoading: false,
      dateRange: [],
      page: 1,
      pageSize: 20,
      totalCount: 0,
      dataList: [],
      currentShowIndex: -1,
      followTextLoading: false,
      userList: [],
      queryUserId: 0
    }
  },
  mounted() {
    this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
    // 获取分析师列表
    getAnalystList().then(res => {
      this.userList = res.data
      this.userList.splice(0, 0, {id: 0, admin_name: '全部'})
    })
    this.queryPageData()
  },
  methods:{
    // 查询数据
    queryPageData(){
      const para = {
        page: this.page,
        page_size: this.pageSize,
        u: this.queryUserId,
        start: datetimeToStr(this.dateRange[0],true,''),
        end: datetimeToStr(this.dateRange[1],true,'')
      }
      getInvestomentPlan(para).then(res => {
        const data = res.data
        this.page = data.page
        this.totalCount = data.total_count
        this.dataList = data.data.map(item => {
          item.editabled = false
          item.followList = []
          return item
        })
      })
    },

    // 保存审查结果
    toSaveAudit(row){
      const putData = {
        plan_id: row.id,
        audit_flag: row.audit_flag
      }
      row.audit_text = row.audit_flag === 1 ? '符合': '不符合'
      auditInvestPlan(putData).then(res => {
        this.$baseMessage(res.msg, res.code===200?'success':'error')
        if (res.code === 200){
          row.editabled = false
        }else{
          this.queryPageData()
        }
      })
    },

    // 显示模拟记录
    toShowRecord(index){
      if (this.currentShowIndex === index){
        this.currentShowIndex = -1
        return
      }
      this.currentShowIndex = index
      // 获取当前数据的跟踪记录
      this.followTextLoading = true
      const planItem = this.dataList[this.currentShowIndex]
      getInvestmentFollow({ plan_id: planItem.id }).then(res => {
        // console.log(res)
        planItem.followList = res.data.records
        this.followTextLoading = false
      }).catch(err=> {this.followTextLoading = false})
    },

    // 指定日期范围查询
    dateRangeQuery(){
      this.queryPageData()
    },

    // 页码变化
    currentPageChange(page){
      this.page = page
      this.queryPageData()
    },
    // 本月查询
    currentMonthQuery(){
      this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
      this.queryPageData()
    },

    // 上一月查询
    preMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
      this.queryPageData()
    },

    // 下一月查询
    nextMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
      this.queryPageData()
    },

    // 当前月份所在全年查询
    yearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'current')
      this.queryPageData()
    },

    // 上一年查询
    preYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'previous')
      this.queryPageData()
    },

    // 下一年查询
    nextYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'next')
      this.queryPageData()
    }
  }
}
</script>

<style scoped lang="scss">
.red-text{color: #ff3d33;}
.green-text{color: #12852c;}
.msg-box{
  margin-bottom: 15px;
  padding: 10px;
  border-radius:4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  .title-label{
    width: 70px;
    display: inline-block;
    text-align: right;
    line-height: 22px;
    margin-right: 4px;
  }
  .title-text{
    color: #34b7fd;
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
  }
}
</style>
